<template>
  <div class="info-container">
    <h3>{{ photoInfo.title }}</h3>
    <div class="info-title">
      <span>发表时间:{{ photoInfo.add_time | dateFormat }}</span>
      <span>点击:{{ photoInfo.click }}次</span>
    </div>
    <hr />

    <!-- 缩略图插件 -->
    <vue-preview :slides="photoThumpList" @close="handleClose" id="preview"></vue-preview>

    <div class="info-content" v-html="photoInfo.content"></div>
    <!-- 评论子组件: 向子组件传入`newsid` -->
    <comment :newsid="photoInfo.id"></comment>
  </div>
</template>

<script>
// 三、导入评论子组件
// 3.1 导入
import comment from "../sub-components/Comment"

export default {
  // 3.2 注册导入的子组件
  components: { comment },

  // 一、接收点击图片跳转后传递过来的参数
  props: ["id"],

  methods: {
    // 二、定义通过id获取图片详情信息的方法
    async getPhotoInfoById() {
      // 2.1 发送请求
      const { data } = await this.$http.get(`/api/getimageInfo/${this.id}`)
      if (data.status === 0) {
        // 2.2 请求成功后进行赋值
        // console.log(data)
        this.photoInfo = data.message[0]
      }
    },

    // 三、获取图片的缩略图方法
    async getThumbImg() {
      // 3.1 发送请求
      const { data } = await this.$http.get(`/api/getthumimages/${this.id}`)
      if (data.status === 0) {
        // console.log(data)
        // 3.2 遍历获取到的缩略图数组,按照缩略图插件的要求添加相应的属性
        data.message.forEach(item => {
          item.w = 960
          item.h = 864
          item.src = item.msrc =
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxHHNXyFtZzv7arTK5nnoQhfg_M9tzIZg4jw&usqp=CAU"
        })
        // 3.3 在data中挂载一个 photoThumpList属性保存缩略图列表
        this.photoThumpList = data.message

        // 3.4 在页面中使用vue-preview提供的方法渲染缩略图
      }
    },
    handleClose() {
      // console.log("close event")
      // 关闭图片预览时触发的方法
    },
  },

  data() {
    return {
      photoInfo: {},
      photoThumpList: [],
    }
  },

  // 生命周期函数(进入页面之后所有的方法调用写到这里)
  created() {
    // (1)调用获取图片详情的方法
    this.getPhotoInfoById()
    // (2)调用获取缩略图的方法
    this.getThumbImg()
  },
}
</script>

<style lang="scss" scoped>
.info-container {
  padding: 0 10px;
  h3 {
    font-size: 15px;
    color: #02a8ff;
    text-align: center;
    line-height: 30px;
  }
  .info-title {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #aaa;
  }
  .info-content {
    font-size: 14px;
    line-height: 28px;
    text-indent: 2em;
  }
}
</style>
